<template>
  <b style="color:red;font-size:20px">tip: </b>当不同效果的刷新频率不一致时，建议将两张刷新频率不同的画布重叠显示，否则会出现左侧画布中图片卡顿的现象（左侧刷新频率0.1s，右侧0.01s）
  <br />
  <canvas
    id="leftDom"
    class="shadow"
  ></canvas>
  <canvas
    id="rightDom"
    class="shadow"
  ></canvas>
  <br />
  <b style="color:red;font-size:20px">注意: </b>当图片频繁刷新时，请指定图片id，不然会在每次刷新时都会创建新的 image 实例，造成多次异步加载，从而导致图片闪烁
</template>

<script setup>
import { init } from "@/home/common.js";
import { routes } from "../node-example.js";
import { onMounted } from "vue";

let leftDom;
let rightDom;
let width = 300;
let height = 300;
onMounted(() => {
  leftDom = init(
    {
      width,
      height,
      drag: false,
    },
    document.getElementById("leftDom")
  );
  loadLeft();

  rightDom = init(
    {
      width,
      height,
      drag: false,
    },
    document.getElementById("rightDom")
  );
  loadRight();
});

const loadLeft = () => {
  let nodes = [];
  let step = 20; // 把一个路径线分成的段数
  for (let route of routes) {
    let temp = 0;
    let stepX = (route.endX - route.startX) / step; // 获取每一段的 x/y 变化范围
    let stepY = (route.endY - route.startY) / step;
    for (let i = 0; i < step; i++) {
      let node = {
        type: "line",
        fillColor: "red",
        lineWidth: 5,
        level: 3,
      };
      node.x = route.startX + i * stepX; // 根据 x/y 变化范围来确定某一段所在位置
      node.y = route.startY + i * stepY;
      node.endX = node.x + stepX;
      node.endY = node.y + stepY;
      if (temp > 3) {
        // 定义亮度为三蓝两红
        node.fillColor = "red";
        nodes.push(node);
        temp = 0;
        continue;
      } else if (temp < 3) {
        node.fillColor = "blue";
        nodes.push(node);
      } else {
        nodes.push(node);
      }
      temp++;
    }
  }
  let imageNode = {
    type: "image",
    x: 130,
    y: 125,
    id: "image0", // 当频繁刷新某一图形的时候，为了避免每次重复加载，需要指定id
    width: 140,
    height: 150,
    rotate: 0.5,
    fillColor: "rgba(0, 0, 0, 0)",
    src: new URL("../../assets/fan.png", import.meta.url).href,
  };
  setInterval(() => {
    leftDom.clearable(); // 每次重新加载时，先清空，后渲染
    let lastColor = nodes[nodes.length - 1].fillColor; // 图案位置不动，将颜色值滚动替换，形成滚动效果
    for (let i = nodes.length - 1; i >= 0; i--) {
      if (nodes[i - 1]) {
        nodes[i].fillColor = nodes[i - 1].fillColor;
      } else {
        nodes[i].fillColor = lastColor;
      }
      leftDom.addNode(nodes[i]);
    }

    imageNode.rotate += 0.05;
    leftDom.addNode(imageNode);
  }, 100);
};

const loadRight = () => {
  let nodes = [
    {
      type: "image",
      x: 30,
      y: 30,
      id: "image1", // 当频繁刷新某一图形的时候，为了避免每次重复加载，需要指定id
      width: 140,
      height: 150,
      rotate: 0.5,
      fillColor: "rgba(0, 0, 0, 0)",
      src: new URL("../../assets/fan.png", import.meta.url).href,
    },
    {
      type: "image",
      x: 130,
      y: 130,
      id: "image2",
      width: 140,
      height: 150,
      rotate: 0.5,
      fillColor: "rgba(0, 0, 0, 0)",
      src: new URL("../../assets/fan.png", import.meta.url).href,
    },
  ];
  setInterval(() => {
    rightDom.clearable();   // 每次刷新之前先清空画布
    for (let node of nodes) {
      node.rotate += 0.05;
      rightDom.addNode(node);
    }
  }, 10);
};
</script>

<style scoped>
#leftDom {
  margin: 20px;
}
#rightDom {
  margin: 20px;
}
</style>